<html>
<head>
    <meta charset="UTF-8">
    <title>My Java Web APP</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<center style="margin-top:2em">
    <h1>欢迎访问Steam游戏商城</h1>
    <div id="game-group" class='game-group'>

    </div>
</center>

<script>

$(document).ready(function(){   // callback function
    $.getJSON("./api/games", function(games){
        refreshGameList(games);
    });
});

function refreshGameList(games) {
    for (var i=0; i<games.length; i++) {
        var game = games[i];
        console.log(game);
        $("#game-group").append(`
            <div class='game-div'>
                <div class='game-pic'><img src='./upload/${game.picture}'></div>
                <div class='game-name'>《 ${game.name} 》</div>
                <div class='game-company'>公司：${game.company}</div>
                <div class='game-price'>价格：${game.price} ￥</div>
            </div>
        `);
    }
}

</script>
</body>
</html>